<script setup>
import { ref, onMounted } from "vue";
import { counterStore } from "../stores/counterStore";
const counter = counterStore();
counter.activeIndex = "";
import axios from "axios";

// 模拟数据 - 实际项目中应该从API获取
const preAnnouncements = ref([
  { id: 1, region: "麻城市中心", title: "麻城经济开发区谌家园小学...", date: "2023-04-13" },
  { id: 2, region: "麻城市中心", title: "麻城市农村公路管理局招标...", date: "2023-04-13" },
  { id: 3, region: "麻城市中心", title: "麻城经济开发区谌家园小学...", date: "2023-04-13" },
  { id: 4, region: "汉川市中心",  title: "汉川电厂四期扩建工程电力...",  date: "2023-04-13" },
  { id: 5, region: "红安县中心", title: "红安县2023年度小型水库安...", date: "2023-04-13" }
]);

const announcements = ref([
  { id: 1, title: "平煤隆基新能源科技有限公司——二期电...", date: "2023-04-13" },
  { id: 2, title: "2023年第4批电气杂项备件询价采购...", date: "2023-04-13" },
  { id: 3, title: "平煤隆基新能源科技有限公司一二期硅烷...", date: "2023-04-13" },
  { id: 4, title: "云南省中医医院污水运维项目咨询邀请公告", date: "2023-04-13" },
  { id: 5, title: "平煤隆基新能源科技有限公司—动力厂房...", date: "2023-04-13" }
]);

const winAnnouncements = ref([
  { id: 1, title: "山东省淄博市山东鑫泉医药有限公司线路迁...", date: "2023-04-13" },
  { id: 2, title: "张家界旅游学校关于果盒/果盘/果篮的网上...", date: "2023-04-13" },
  { id: 3, title: "长沙市芙蓉区朝阳小学关于其他广告服务的...",  date: "2023-04-13" },
  { id: 4, title: "沙沟村特色农产品电商综合服务中心建设...", date: "2023-04-13" },
  { id: 5, title: "涟源市工贸中专关于LED头灯的网上超市采...", date: "2023-04-13" }
]);

const enterprisePurchases = ref([
  { id: 1, title: "慈利县三合镇国太桥中学关于新鲜水果的...", date: "2023-04-13" },
  { id: 2, title: "兰陵县第七中学七中2023年保安经费成交公告", date: "2023-04-13" },
  { id: 3, title: "XJ023041300027CG-连接器询价", date: "2023-04-13" },
  { id: 4, title: "岳阳县公安局关于机械硬盘的网上超市采购...", date: "2023-04-13" },
  { id: 5, title: "青州市机关事务服务中心车辆保险成交公告", date: "2023-04-13" }
]);

onMounted(() => {
  const swiper = {
    currentSlide: 0,
    slides: document.querySelectorAll(".swiper-slide"),
    pagination: document.querySelector(".swiper-pagination"),

    init() {
      if (!this.slides.length) return;
      this.createPagination();
      this.updatePagination();
      setInterval(() => this.nextSlide(), 5000);
    },

    createPagination() {
      if (!this.pagination) return;
      this.slides.forEach((_, index) => {
        const bullet = document.createElement("span");
        bullet.classList.add("swiper-pagination-bullet");
        bullet.addEventListener("click", () => this.goToSlide(index));
        this.pagination.appendChild(bullet);
      });
    },

    updatePagination() {
      if (!this.pagination) return;
      const bullets = this.pagination.querySelectorAll(
        ".swiper-pagination-bullet"
      );
      bullets.forEach((bullet, index) => {
        if (index === this.currentSlide) {
          bullet.classList.add("active");
        } else {
          bullet.classList.remove("active");
        }
      });
    },

    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.slides.length;
      this.updateSlides();
      this.updatePagination();
    },

    goToSlide(index) {
      this.currentSlide = index;
      this.updateSlides();
      this.updatePagination();
    },

    updateSlides() {
      this.slides.forEach((slide, index) => {
        if (index === this.currentSlide) {
          slide.style.display = "block";
        } else {
          slide.style.display = "none";
        }
      });
    }
  };

  swiper.init();
});
</script>

<template>
  <div class="carbon">
    
    <!-- 轮播图区域 -->
    <el-carousel type="card" height="200px" indicator-position="none">
      <el-carousel-item v-for="item in 3" :key="item">
        <img :src="`/swiper${item}.png`" alt="轮播图" />
      </el-carousel-item>
    </el-carousel>
    <!-- 公告区域 -->
    <section class="notice-section">
      <div class="container">
        <div class="grid-container">
          <!-- 招标预告 -->
          <div class="notice-card featured-card">
            <div class="card-header">
              <h3 class="card-title">招标预告</h3>
            </div>
             
            <div class="image-container">
              <img src="/images/主页/u12.png" alt="招标预告图片" class="featured-image" />
              
              <router-link to="/information" class="more-link">
                <span class="more-text">更多</span>
                <img src="/pic2.png" alt="更多" class="more-arrow" />
              </router-link>
            </div>
            <ul class="notice-list">
              <li v-for="(item, index) in preAnnouncements" :key="index" class="notice-item">
                <router-link to="" class="notice-link">
                  <img src="/pic3.png" alt="地区图标" class="region-icon" />
                  <span class="region">[{{ item.region }}]</span>
                  <span class="title">{{ item.title }}</span>
                  <span class="date">{{ item.date }}</span>
                </router-link>
              </li>
            </ul>
          </div>

          <!-- 招标公告 -->
          <div class="notice-card featured-card">
            <div class="card-header">
              <h3 class="card-title">招标公告</h3>
            </div>
            <div class="image-container">
              <img src="/images/主页/u12.png" alt="招标公告图片" class="featured-image" />
              <router-link to="" class="more-link">
                <span class="more-text">更多</span>
                <img src="/pic2.png" alt="更多" class="more-arrow" />
              </router-link>
            </div>
            <ul class="notice-list">
              <li v-for="(item, index) in announcements" :key="index" class="notice-item">
                <router-link to="" class="notice-link">
                  <img src="/pic3.png" alt="地区图标" class="region-icon" />

                  <span class="title">{{ item.title }}</span>
                  <span class="date">{{ item.date }}</span>
                </router-link>
              </li>
            </ul>
          </div>

          <!-- 中标公告 -->
          <div class="notice-card featured-card">
            <div class="card-header">
              <h3 class="card-title">中标公告</h3>
            </div>
            <div class="image-container">
              <img src="/images/主页/u12.png" alt="中标公告图片" class="featured-image" />
              <router-link to="" class="more-link">
                <span class="more-text">更多</span>
                <img src="/pic2.png" alt="更多" class="more-arrow" />
              </router-link>
            </div>
            <ul class="notice-list">
              <li v-for="(item, index) in winAnnouncements" :key="index" class="notice-item">
                <router-link  to="" class="notice-link">
                  <img src="/pic3.png" alt="地区图标" class="region-icon" />

                  <span class="title">{{ item.title }}</span>
                  <span class="date">{{ item.date }}</span>
                </router-link>
              </li>
            </ul>
          </div>

          <!-- 企业采购 -->
          <div class="notice-card featured-card">
            <div class="card-header">
              <h3 class="card-title">企业采购</h3>
            </div>
            <div class="image-container">
              <img src="/images/主页/u12.png" alt="企业采购图片" class="featured-image" />
              <router-link to="" class="more-link">
                <span class="more-text">更多</span>
                <img src="/pic2.png" alt="更多" class="more-arrow" />
              </router-link>
            </div>
            <ul class="notice-list">
              <li v-for="(item, index) in enterprisePurchases" :key="index" class="notice-item">
                <router-link to="" class="notice-link">
                  <img src="/pic3.png" alt="地区图标" class="region-icon" />

                  <span class="title">{{ item.title }}</span>
                  <span class="date">{{ item.date }}</span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>



<style scoped>
:root {
  --primary-color: #165dff;
  --secondary-color: #00b42a;
  --text-color: #333;
  --light-text-color: #666;
  --border-color: #e5e5e5;
  --background-color: #f5f5f5;
  --more-text-color: #999;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carbon {
  background-color: #f5f5f5;
  max-width: 1200px;
  margin: 0 auto;
}

.carbon-container {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  background-color: #f5f5f5;
}

/* 轮播图样式 */
.el-carousel__item img {
  height: 200px;
}

/* 公告区域样式 */
.notice-section {
  padding: 20px 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.notice-card {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  color: #fff;
  z-index: 2;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.more-link {
  position: absolute;
  bottom: 155px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #504a4a;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: opacity 0.3s;
  z-index: 100;
}
.more-link:hover {
  opacity: 0.8;
}

.more-text {
  color: var(--more-text-color);
  font-size: 14px;
}

.more-arrow {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(0.7);
  transition: transform 0.3s;
}

.more-link:hover .more-arrow {
  transform: translateX(2px);
}

.image-container {
  height: 200px;
  margin-top: -60px;
  overflow: hidden;
  position: relative;
}

.featured-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.region-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.notice-list {
  align-items: center;
  list-style: none;
  padding: 15px 20px;
  margin-top: -150px;
  position: relative;
  z-index: 1;
}

.notice-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: black;
}

.notice-link:hover {
  background-color: var(--hover-bg-color);
  color: black;
}

.notice-link:hover .more-arrow {
  transform: translateX(2px);
}

.region {
  color: var(--primary-color);
  margin-right: 10px;
}

.title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 20px;
}

.date {
  color: var(--light-text-color);
  font-size: 14px;
  white-space: nowrap;
}
</style>